<template>
  <view>
    <u-empty mode="favor" v-if="list.length == 0"></u-empty>
    <view class="list_box" v-for="(item, index) in list" :key="index">
      <u-row>
        <u-col span="1">
          <image
            v-show="isEdit"
            class="del"
            :src="
              item.isChecked
                ? asyncImgs.history.checked
                : asyncImgs.history.unchecked
            "
            mode=""
            style="width: 40rpx; height: 40rpx"
            @click="onChecked(item)"
          ></image>
        </u-col>
        <u-col :span="isEdit ? 11 : 12">
          <u-row gutter="20">
            <u-col span="2"
              ><image
                :src="item.logo"
                mode="widthFix"
                style="width: 90rpx; height: 90rpx; border-radius: 100rpx"
              ></image
            ></u-col>
            <u-col span="10">
              <view style="display: flex; justify-content: space-between">
                <view>
                  <view style="font-size: 30rpx; font-weight: 500">{{
                    item.name
                  }}</view>
                  <view style="font-size: 24rpx; color: #606266"
                    >{{ $utils.timeFrom(item.created_at)
                    }}{{ $t("person.subscription") }}</view
                  >
                </view>
                <!-- <view style="color: #19BE6B;">
									<text style="font-weight: bolder;margin-right:10rpx">·</text>
									<text style="font-size: 24rpx;">4件上新</text>
								</view> -->
              </view>
              <view
                style="
                  display: flex;
                  justify-content: space-between;
                  margin-top: 20rpx;
                "
              >
                <image
                  :src="el.cover_pic"
                  mode="widthFix"
                  style="width: 120rpx; border-radius: 5rpx"
                  v-for="(el, index) in item.goods_list"
                  :key="index"
                ></image>
              </view>
            </u-col>
          </u-row>
        </u-col>
      </u-row>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    isEdit: {
      type: Boolean,
      default: false,
    },
    isCheckAll: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      list: [],
    };
  },
  computed: {
    checkedItemList() {
      return this.list.filter((item) => item.isChecked);
    },
  },
  watch: {
    isCheckAll(val) {
      if (val) {
        this.list.forEach((item) => {
          item.isChecked = true;
        });
      } else if (this.checkedItemList.length == this.list.length) {
        this.list.forEach((item) => {
          item.isChecked = false;
        });
      }
    },
    checkedItemList: {
      deep: true,
      handler(val) {
        this.$emit("checkChange", val);
      },
    },
    list: {
      deep: true,
      handler(val) {
        let res = true;
        val.forEach((el) => {
          res = el.isChecked && res;
        });
        this.$emit("allChecked", res);
      },
    },
  },
  created() {
    this.getListData();
  },
  methods: {
    async getListData() {
      try {
        const res = await this.$allrequest.user.favoriteList({ type: 1 }); //0:商品，1:店铺
        res.data.list.forEach((item) => {
          item.isChecked = false;
        });
        this.list = res.data.list;
      } catch (e) {
        //TODO handle the exception
      }
    },
    onChecked(item) {
      item.isChecked = !item.isChecked;
    },
  },
};
</script>

<style lang="scss" scoped>
.del {
  transform: translate(0, 90rpx);
}
.list_box {
  background-color: #fff;
  padding: 30rpx 15rpx;
  border-radius: 28rpx;
  margin-bottom: 30rpx;
}
</style>
